<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
	<title>calendar</title>
	
	<link href="css/indexStyle.css" rel="stylesheet"/>
	<link rel="icon" href="image/icon.png"/>
	
	<script src="js/indexJs.js"></script>
	
	<script type="text/javascript">
	window.onload=function(){
		var d = new Date();
		var subYear = document.getElementById("subYear");
		subYear.innerHTML = show_Year(d);
		
		var subMonth = document.getElementById("subMonth");
		subMonth.innerHTML = show_Month(d);
		
		showCalendar(d);			
		ValueForRecord(d);	
		showCalNow();		
		startTime();
		var d2 = new Date();
		showWeek(d2);
	}
	
	function returnToday(){
		var yearInput = document.getElementById("yearInput");
		yearInput.value = "";
		var monthInput = document.getElementById("monthInput");
		monthInput.value = "";
		
		var d = new Date();
		var subYear = document.getElementById("subYear");
		subYear.innerHTML = show_Year(d);
		
		var subMonth = document.getElementById("subMonth");
		subMonth.innerHTML = show_Month(d);
		
		showCalendar(d);
		ValueForRecord(d);
	}
	
	function showTimeAndCalendar(){
		var d = new Date();		
		var subYear = document.getElementById("subYear");
		subYear.innerHTML = show_Year(d);
		
		var subMonth = document.getElementById("subMonth");
		subMonth.innerHTML = show_Month(d);
		showCalendar(d);
	}
	
	function ValueForRecord(d){	
		var year = d.getFullYear();
		var month = d.getMonth() + 1;
		var date = d.getDate();
		var value = year + "_" + month + "_" + date;
		
		var create = document.getElementById("create");
		create.value = value;
		
		var search = document.getElementById("search");
		search.value = value;
	}
	
	function test(id){
		//获取号
		var nodeDay = document.getElementById(id);
		var valueDay = nodeDay.innerHTML;
		
		//获取月
		var nodeMonth = document.getElementById("subMonth");
		var valueMonth = nodeMonth.innerHTML;
		
		//获取年
		var nodeYear = document.getElementById("subYear");
		var valueYear = nodeYear.innerHTML;
		
		//相关验证工作
		if(parseInt(id[2]) == 1){
			if(parseInt(valueDay) > 7)
				if(parseInt(valueMonth) == 1){
					valueMonth = 12;
					valueYear = parseInt(valueYear) - 1;
				}
				else{
					valueMonth = parseInt(valueMonth) - 1;
				}
		}
		else if(parseInt(id[2]) > 4) {
			if(parseInt(valueDay) < 15)
				if(parseInt(valueMonth) == 12){
					valueMonth = 1;
					valueYear = parseInt(valueYear) + 1;
				}
				else{
					valueMonth = parseInt(valueMonth) + 1;
				}
		}	
		
		
		//汇总
		var valueAll = valueYear + "_" + valueMonth + "_" + valueDay;
		
		//放至日志栏
		var nodeCreate = document.getElementById("create");
		var nodeSearch = document.getElementById("search");
		
		nodeCreate.value = valueAll;
		nodeSearch.value = valueAll;
	}
	
	function toPreMo(){
		var year = document.getElementById("subYear").innerHTML;
		var month = document.getElementById("subMonth").innerHTML;
		
		var d = new Date();
		if(month == 1){
			year = year - 1;
			month = 12;
		}
		else{
			month = month - 1;
		}
		d.setFullYear(year, month - 1);
		var subYear = document.getElementById("subYear");
		subYear.innerHTML = show_Year(d);
		
		var subMonth = document.getElementById("subMonth");
		subMonth.innerHTML = show_Month(d);
		
		showCalendar(d);
		ValueForRecord(d);	
	}
	
	function toNextMo(){
		var year = document.getElementById("subYear").innerHTML;
		var month = document.getElementById("subMonth").innerHTML;
		
		var d = new Date();
		if(month == 12){
			year = parseInt(year) + 1;
			month = 1;
		}
		else{
			month = parseInt(month) + 1;
		}
		d.setFullYear(year, month - 1);
		var subYear = document.getElementById("subYear");
		subYear.innerHTML = show_Year(d);
		
		var subMonth = document.getElementById("subMonth");
		subMonth.innerHTML = show_Month(d);
		
		showCalendar(d);
		ValueForRecord(d);	
	}
	
	function startTime(){
		var today=new Date();
		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();
		// add a zero in front of numbers<10
		m=checkTime(m);
		s=checkTime(s);
		document.getElementById('timeNow').innerHTML = h + ":" + m + ":" + s;
		t=setTimeout('startTime()', 500);
	}

	function checkTime(i){
		if (i<10){
			i="0" + i;
		}
		return i;
	}
	
	function showCalNow(){
	
		function showDayOfWeek(d) {
			var weekday = new Array(7);
			weekday[0] = "星期日";
			weekday[1] = "星期一";
			weekday[2] = "星期二";
			weekday[3] = "星期三";
			weekday[4] = "星期四";
			weekday[5] = "星期五";
			weekday[6] = "星期六";
			return weekday[d.getDay()];
		};
	
		var today = new Date();
		var year = today.getFullYear();
		var month = parseInt( today.getMonth() ) + 1;
		var date = today.getDate();
		var day = showDayOfWeek(today);
		
		var node = document.getElementById("calNow");
		node.innerHTML = year + "/" + month + "/" + date + "   " + day;
	}
	
	</script>
</head>

<body>
	<div id="main">		
		<div id="startHeadline">
			<p id="calLine">日历&云记事</p>
			<p id="headline"></p>
			<p id="timeNow"></p>
			<p id="calNow"></p>		
		</div>
		<!--大日历（新历）部分-->
		<div id="calBlock">
			<table class="cal" summary="A calandar style date picker">
				<caption id="subHeader">
					<a rel="prev" onclick="toPreMo()">&lt;</a>
					<span id="subYear"></span><span>年</span>
					<span id="subMonth"></span><span>月</span>
					<a rel="next" onclick="toNextMo()">&gt;</a>
				</caption>
				<colgroup>
					<col id="sun" />
					<col id="mon" />
					<col id="tue" />
					<col id="wed" />
					<col id="thur" />
					<col id="fri" />
					<col id="sat" />
				</colgroup>

				<thead>
					<tr>
						<th scope="col">星期日</th>
						<th scope="col">星期一</th>
						<th scope="col">星期二</th>
						<th scope="col">星期三</th>
						<th scope="col">星期四</th>
						<th scope="col">星期五</th>
						<th scope="col">星期六</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td id="r1c1" onclick="test('ar1c1')"><a id="ar1c1"></a><p id="pr1c1"></p><p id="dr1c1"></p></td>
						<td id="r1c2" onclick="test('ar1c2')"><a id="ar1c2"></a><p id="pr1c2"></p><p id="dr1c2"></p></td>
						<td id="r1c3" onclick="test('ar1c3')"><a id="ar1c3"></a><p id="pr1c3"></p><p id="dr1c3"></p></td>
						<td id="r1c4" onclick="test('ar1c4')"><a id="ar1c4"></a><p id="pr1c4"></p><p id="dr1c4"></p></td>
						<td id="r1c5" onclick="test('ar1c5')"><a id="ar1c5"></a><p id="pr1c5"></p><p id="dr1c5"></p></td>
						<td id="r1c6" onclick="test('ar1c6')"><a id="ar1c6"></a><p id="pr1c6"></p><p id="dr1c6"></p></td>
						<td id="r1c7" onclick="test('ar1c7')"><a id="ar1c7"></a><p id="pr1c7"></p><p id="dr1c7"></p></td>
					</tr>
					<tr>
						<td id="r2c1" onclick="test('ar2c1')"><a id="ar2c1"></a><p id="pr2c1"></p><p id="dr2c1"></p><p id="kr2c1"></p></td>
						<td id="r2c2" onclick="test('ar2c2')"><a id="ar2c2"></a><p id="pr2c2"></p><p id="dr2c2"></p></td>
						<td id="r2c3" onclick="test('ar2c3')"><a id="ar2c3"></a><p id="pr2c3"></p><p id="dr2c3"></p></td>
						<td id="r2c4" onclick="test('ar2c4')"><a id="ar2c4"></a><p id="pr2c4"></p><p id="dr2c4"></p></td>
						<td id="r2c5" onclick="test('ar2c5')"><a id="ar2c5"></a><p id="pr2c5"></p><p id="dr2c5"></p></td>
						<td id="r2c6" onclick="test('ar2c6')"><a id="ar2c6"></a><p id="pr2c6"></p><p id="dr2c6"></p></td>
						<td id="r2c7" onclick="test('ar2c7')"><a id="ar2c7"></a><p id="pr2c7"></p><p id="dr2c7"></p></td>
					</tr>
					<tr>
						<td id="r3c1" onclick="test('ar3c1')"><a id="ar3c1"></a><p id="pr3c1"></p><p id="dr3c1"></p><p id="kr3c1"></p></td>
						<td id="r3c2" onclick="test('ar3c2')"><a id="ar3c2"></a><p id="pr3c2"></p><p id="dr3c2"></p></td>
						<td id="r3c3" onclick="test('ar3c3')"><a id="ar3c3"></a><p id="pr3c3"></p><p id="dr3c3"></p></td>
						<td id="r3c4" onclick="test('ar3c4')"><a id="ar3c4"></a><p id="pr3c4"></p><p id="dr3c4"></p></td>
						<td id="r3c5" onclick="test('ar3c5')"><a id="ar3c5"></a><p id="pr3c5"></p><p id="dr3c5"></p></td>
						<td id="r3c6" onclick="test('ar3c6')"><a id="ar3c6"></a><p id="pr3c6"></p><p id="dr3c6"></p></td>
						<td id="r3c7" onclick="test('ar3c7')"><a id="ar3c7"></a><p id="pr3c7"></p><p id="dr3c7"></p></td>
					</tr>
					<tr>
						<td id="r4c1" onclick="test('ar4c1')"><a id="ar4c1"></a><p id="pr4c1"></p><p id="dr4c1"></p><p id="kr4c1"></p></td>
						<td id="r4c2" onclick="test('ar4c2')"><a id="ar4c2"></a><p id="pr4c2"></p><p id="dr4c2"></p></td>
						<td id="r4c3" onclick="test('ar4c3')"><a id="ar4c3"></a><p id="pr4c3"></p><p id="dr4c3"></p></td>
						<td id="r4c4" onclick="test('ar4c4')"><a id="ar4c4"></a><p id="pr4c4"></p><p id="dr4c4"></p></td>
						<td id="r4c5" onclick="test('ar4c5')"><a id="ar4c5"></a><p id="pr4c5"></p><p id="dr4c5"></p><p id="kr4c5"></p></td>
						<td id="r4c6" onclick="test('ar4c6')"><a id="ar4c6"></a><p id="pr4c6"></p><p id="dr4c6"></p></td>
						<td id="r4c7" onclick="test('ar4c7')"><a id="ar4c7"></a><p id="pr4c7"></p><p id="dr4c7"></p></td>
					</tr>
					<tr>
						<td id="r5c1" onclick="test('ar5c1')"><a id="ar5c1"></a><p id="pr5c1"></p><p id="dr5c1"></p></td>
						<td id="r5c2" onclick="test('ar5c2')"><a id="ar5c2"></a><p id="pr5c2"></p><p id="dr5c2"></p></td>
						<td id="r5c3" onclick="test('ar5c3')"><a id="ar5c3"></a><p id="pr5c3"></p><p id="dr5c3"></p></td>
						<td id="r5c4" onclick="test('ar5c4')"><a id="ar5c4"></a><p id="pr5c4"></p><p id="dr5c4"></p></td>
						<td id="r5c5" onclick="test('ar5c5')"><a id="ar5c5"></a><p id="pr5c5"></p><p id="dr5c5"></p><p id="kr5c5"></p></td>
						<td id="r5c6" onclick="test('ar5c6')"><a id="ar5c6"></a><p id="pr5c6"></p><p id="dr5c6"></p></td>
						<td id="r5c7" onclick="test('ar5c7')"><a id="ar5c7"></a><p id="pr5c7"></p><p id="dr5c7"></p></td>
					</tr>
					<tr>
						<td id="r6c1" onclick="test('ar6c1')"><a id="ar6c1"></a><p id="pr6c1"></p><p id="dr6c1"></p></td>
						<td id="r6c2" onclick="test('ar6c2')"><a id="ar6c2"></a><p id="pr6c2"></p><p id="dr6c2"></p></td>
						<td id="r6c3" onclick="test('ar6c3')"><a id="ar6c3"></a><p id="pr6c3"></p><p id="dr6c3"></p></td>
						<td id="r6c4" onclick="test('ar6c4')"><a id="ar6c4"></a><p id="pr6c4"></p><p id="dr6c4"></p></td>
						<td id="r6c5" onclick="test('ar6c5')"><a id="ar6c5"></a><p id="pr6c5"></p><p id="dr6c5"></p></td>
						<td id="r6c6" onclick="test('ar6c6')"><a id="ar6c6"></a><p id="pr6c6"></p><p id="dr6c6"></p></td>
						<td id="r6c7" onclick="test('ar6c7')"><a id="ar6c7"></a><p id="pr6c7"></p><p id="dr6c7"></p></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<!--记事本-->
		<div id="recordBook">
			<div id="recordContent">
				<h2>记事本</h2>
				<form method="post" action="record/edit.php">
					<input type="text" id="create" name="create"/>
					<input type="submit" value="编辑日志" name="submit" />
				</form>
				
				<form method="post" action="record/read.php">
					<input type="text" id="search" name="search"/>
					<input type="submit" value="查看日志" name="submit" />
				</form>
			</div>
		</div>

		<!--调至其他时间段-->
		<div id="query">
			<div id="queryContent">
				<h2>查询</h2>
				<p id="srcToOtherTime">	
					<p>年份：<input id="yearInput" type="text" /></p>
					<p id="sYear">&nbsp;</p>			 
					<p>月份：<input id="monthInput" type="text" /></p>
					<p id="sMonth">&nbsp;</p>	
					<button id="calendarButton" onclick="showTimeAndCalendar()">跳至输入的时间</button>
					<button id="returnButton" onclick="returnToday()">回到今天</button>
				</p>
			</div>
		</div>

		 <!--按周排出的日历-->
		<div id="weekBlock">
			<table class="week">
				<caption>当天所在周</caption>
				<colgroup>
					<col id="mon" />
					<col id="tue" />
					<col id="wed" />
					<col id="thur" />
					<col id="fri" />
					<col id="sat" />
					<col id="sun" />
				</colgroup>
				<tbody>
					<tr>
						<td id="Monday">
							<p id="x1y1"></p>
							<p id="x1y2"></p>
							<p id="x1y3"></p>
							<p id="x1y4"></p>
							<p id="dx1y1"></p>
						</td>
						<td id="Tuesday">
							<p id="x2y1"></p>
							<p id="x2y2"></p>
							<p id="x2y3"></p>
							<p id="x2y4"></p>
							<p id="dx2y1"></p>
						</td>
						<td id="Wednesday">
							<p id="x3y1"></p>
							<p id="x3y2"></p>
							<p id="x3y3"></p>
							<p id="x3y4"></p>
							<p id="dx3y1"></p>
						</td>
						<td id="Thursday">
							<p id="x4y1"></p>
							<p id="x4y2"></p>
							<p id="x4y3"></p>
							<p id="x4y4"></p>
							<p id="dx4y1"></p>
						</td>
						<td id="Firday">
							<p id="x5y1"></p>
							<p id="x5y2"></p>
							<p id="x5y3"></p>
							<p id="x5y4"></p>
							<p id="dx5y1"></p>
						</td>
						<td id="Saturday">
							<p id="x6y1"></p>
							<p id="x6y2"></p>
							<p id="x6y3"></p>
							<p id="x6y4"></p>
							<p id="dx6y1"></p>
						</td>
						<td id="Sunday">
							<p id="x0y1"></p>
							<p id="x0y2"></p>
							<p id="x0y3"></p>
							<p id="x0y4"></p>
							<p id="dx0y1"></p>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>